<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
#panel,.flip{
    font-size: 16px;
    padding: 10px;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    border: solid 1px #a6d8a8;
}
#panel{
    display: none;
}
</style>
</head>
<body>
    <p class="flip" onclick="myFunction()">你敢不敢点击这里</p>

<div id="panel">
  <p>该面板包含一个 div 元素，默认情况下该元素是隐藏的（display: none）。</p>
  <p>它使用 CSS 进行样式设置，我们使用 JavaScript 来显示它（display: block）。</p>
  <p>工作原理：请注意，带有 class="flip" 的 p 元素有 onclick 属性。当用户单击 p 元素时，将执行一个名为 myFunction() 的函数，该函数将 id="panel" 的 div 样式从 display:none（隐藏）更改为 display:block（可见）。</p>
  <p>您将在我们的 JavaScript 教程中学到有关 JavaScript 的更多知识。</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>